<template>
	  <view class="my-userinfo-container">
	
	    <!-- 头像昵称区域 -->
	    <view class="top-box">
	      <!-- <image :src="avatarUrl" class="avatar"></image> -->
	      <!-- <view class="nickname">{{userinfo.nickName}}</view> -->
		  
		  <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
		    <image class="avatar" :src="userinfo.avatarUrl">
				
			</image>
		  </button> 
		  <input type="nickname" @change="genxin" v-model="userinfo.nickName" class="nickname" placeholder="请输入昵称"/>
	    </view>
	
	
	<!-- 面板的列表区域 -->
	<view class="panel-list">
	 
	
	  <!-- 第二个面板 -->
	<!-- 第二个面板 -->
	<view class="panel">
	  <!-- 面板的标题 -->
	  <!-- <view class="panel-title">我的报价</view> -->
	  <!-- 面板的主体 -->
	  <view class="panel-body">
	    <!-- 面板主体中的 item 项 -->
	  <!--  <view class="panel-item">
	  <uni-icons type="contact" size="30"></uni-icons> -->
	<!--      <text>我的报价</text>
	    </view>
	    <view class="panel-item">
	      <uni-icons type="gift-filled" size="30"></uni-icons>
	      <text>历史报价</text>
	    </view> -->
	   <!-- <view class="panel-item">
	    <uni-icons type="info-filled" size="30"></uni-icons>
	      <text>未报价</text>
	    </view> -->
	    <view @click="dengl" class="panel-item">
	      <uni-icons type="calendar" size="30"></uni-icons>
	      <text>后管注册</text>
	    </view>
	  </view>
	</view>
	  <!-- 第三个面板 -->
	  <!-- 第三个面板 -->
	  <view class="panel">
	   <!-- <view class="panel-list-item">
	      <text>收货地址</text>
	      <uni-icons type="arrowright" size="15"></uni-icons>
	    </view> -->
	    <view  @click="open" class="panel-list-item">
	      <text>联系我们</text>
	      <uni-icons type="arrowright" size="15"></uni-icons>
	    </view>
	    <view @click="logout" class="panel-list-item">
	      <text>退出登录</text>
	      <uni-icons type="arrowright" size="15"></uni-icons>
	    </view>
	  </view>
	</view>
	

	<uni-popup background-color="#fff"  ref="popup" >
		
		<uni-card>
		<view @click="dadianhua" class="">
			手机号： 13255929517
		</view>
		</uni-card>
		
	</uni-popup>
	
	  </view>
</template>

<script>
	// 按需导入 mapState 辅助函数
	// import { mapState } from 'vuex'
	// 按需导入辅助函数
	import { mapState, mapMutations } from 'vuex'
	export default {
		name:"my-userinfo",
		
		
		computed: {
		    // 将 m_user 模块中的 userinfo 映射到当前页面中使用
		    ...mapState('user', ['userinfo']),
		  },
		  data() {
		    return {
				avatarUrl:'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
				
			}
		  },
		  mounted(){
			  console.log(this.userinfo);
		  },
		  methods:{
			  
			  
			    ...mapMutations('user', ['updateUserInfo', 'updateToken', 'updateAddress']),
				
				dengl(){
					uni.showModal({
						title: '提示',
						content: "注册后台管理系统后，可以自定义计算器数据，后台地址是http://43.138.24.30！",
						success: function (res) {
							if (res.confirm) {
								uni.navigateTo({
									url:`/subpkg/houtaizhuce/houtaizhuce`
								});
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				},
				// 打电话
				dadianhua(){
					uni.makePhoneCall({
						phoneNumber: '114' //仅为示例
					});

				},
					open() {
						console.log(this.$refs);
							this.$refs.popup.open("center")
						},
						/**
						 * 点击取消按钮触发
						 * @param {Object} done
						 */
						close() {
							// TODO 做一些其他的事情，before-close 为true的情况下，手动执行 close 才会关闭对话框
							// ...
							this.$refs.popup.close()
						},
				genxin(e){
				
					this.userinfo.nickName=e.detail.value
					 this.updateUserInfo(this.userinfo)
				},
			  onChooseAvatar(e) {
			  			
			    const { avatarUrl } = e.detail 
			  		 
			  		 
			    this.userinfo.avatarUrl=avatarUrl
				
			  this.updateUserInfo(this.userinfo)
			  },
			 async logout(){
				  
				  
				  const data = await uni.showModal({
				      title: '提示',
				      content: '确认退出登录吗？'
				    })
					
					if(data[1].confirm){
						
						  // 用户确认了退出登录的操作
						     // 需要清空 vuex 中的 userinfo、token 和 address
						     this.updateUserInfo({})
						     this.updateToken('')
						  
					}
			  },
		  }
	}
</script>

<style scoped lang="scss">
.my-userinfo-container {
  height: 100%;
  // 为整个组件的结构添加浅灰色的背景
  background-color: #f4f4f4;

  .top-box {
    height: 400rpx;
    background-color: #029d94;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .avatar {
      display: block;
      width: 90px;
      height: 90px;
      border-radius: 45px;
      border: 2px solid white;
      box-shadow: 0 1px 5px black;
    }
button {padding: 0;
  border-radius: 45px;
}
    .nickname {
      color: white;
      font-weight: bold;
      font-size: 16px;
      margin-top: 10px;
    }
  }
}

input{text-align: center;}
.panel-list {
  padding: 0 10px;
  position: relative;
  top: -10px;

  .panel {
    background-color: white;
    border-radius: 3px;
    margin-bottom: 8px;

    .panel-body {
      display: flex;
      justify-content: space-around;

      .panel-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        font-size: 13px;
        padding: 10px 0;
      }
    }
  }
}.panel-list {
  padding: 0 10px;
  position: relative;
  top: -10px;

  .panel {
    background-color: white;
    border-radius: 3px;
    margin-bottom: 8px;

    .panel-title {
      line-height: 45px;
      padding-left: 10px;
      font-size: 15px;
      border-bottom: 1px solid #f4f4f4;
    }

    .panel-body {
      display: flex;
      justify-content: space-around;

      .panel-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        font-size: 13px;
        padding: 10px 0;

        .icon {
          width: 35px;
          height: 35px;
        }
      }
    }
  }
}.panel-list-item {
  height: 45px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  padding: 0 10px;
}

.my-userinfo-container {
  height: 100%;
  // 为整个组件的结构添加浅灰色的背景
  background-color: #f4f4f4;

  .top-box {
    height: 400rpx;
    background-color: #029d94;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .avatar {
      display: block;
      width: 90px;
      height: 90px;
      border-radius: 45px;
      border: 2px solid white;
      box-shadow: 0 1px 5px black;
    }
button {padding: 0;
  border-radius: 45px;
}
    .nickname {
      color: white;
      font-weight: bold;
      font-size: 16px;
      margin-top: 10px;
    }
  }
}

input{text-align: center;}
.panel-list {
  padding: 0 10px;
  position: relative;
  top: -10px;

  .panel {
    background-color: white;
    border-radius: 3px;
    margin-bottom: 8px;

    .panel-body {
      display: flex;
      justify-content: space-around;

      .panel-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        font-size: 13px;
        padding: 10px 0;
      }
    }
  }
}.panel-list {
  padding: 0 10px;
  position: relative;
  top: -10px;

  .panel {
    background-color: white;
    border-radius: 3px;
    margin-bottom: 8px;

    .panel-title {
      line-height: 45px;
      padding-left: 10px;
      font-size: 15px;
      border-bottom: 1px solid #f4f4f4;
    }

    .panel-body {
      display: flex;
      justify-content: space-around;

      .panel-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        font-size: 13px;
        padding: 10px 0;

        .icon {
          width: 35px;
          height: 35px;
        }
      }
    }
  }
}.panel-list-item {
  height: 45px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  padding: 0 10px;
}
</style>